<template>
  <div style="height:600px;">
    <div class="my_l">
      <header class="top_bar">
        <h3 class="cartname">机构充值</h3>
      </header>
      <main class="user_login_box">
        <div class="login_dialog">
          <div class="_username" v-bind:style="{ display: typeDisplay}">
            <input type="text" name="username" placeholder="请输入用户名" class="user_input" v-model="username" />
          </div>
          <div class="_username">
            <input type="number" name="mobile" placeholder="请输入手机号" class="user_input" oninput="if(value.length>11)value=value.slice(0,11)" v-model="mobile" />
          </div>
          <div class="_username" v-bind:style="{ display: intypeDisplay}">
            <input onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="value=(parseInt((value=value.replace(/\D/g,''))==''||parseInt((value=value.replace(/\D/g,''))==0)?'1':value,10))" type="number" name="integral" placeholder="请输充值积分的数量" class="user_input" v-model="integral	" />
          </div>
          <div class="_username" v-bind:style="{ display: intypeDisplay}">
            <input type="text" name="reason" placeholder="请输充值的原因" class="user_input" v-model="reason" />
          </div>
          <!-- <div v-bind:style="{ display: intypeDisplay}">
          <select v-model="payType" placeholder="请选择" class="_username">
            <option v-for="item in payType_options" :key="item.value" :label="item.label" :value="item.value">
            </option>
          </select>
        </div> -->
          <div v-bind:style="{ display: intypeDisplay}" style="margin:20px 0px 0px 0px; ">
            <mt-radio title="支付方式:" v-model="payType" :options="radio_options">
            </mt-radio>
          </div>

          <div v-bind:style="{ display: typeDisplay}">
            <!-- <select v-model="sex" placeholder="请选择" class="_username">
            <option v-for="item in sex_options" :key="item.value" :label="item.label" :value="item.value">
            </option>
          </select> -->

            <mt-radio title="性别" v-model="sex" :options="sex_options">
            </mt-radio>
          </div>
          <div class="login_box" style="padding-bottom=50px;" v-bind:style="{ display: intypeDisplay}">
            <mt-button style="width:100%;height:100%" @click="goPay()" :disabled="disabled" class="btn_login">充值</mt-button>
          </div>
          <div class="login_box" v-bind:style="{ display: typeDisplay}">
            <a @click="addUser()" class="btn_login">创建用户</a>
          </div>
        </div>
      </main>
    </div>
  </div>
</template>
<script>
import { Radio, MessageBox } from 'mint-ui'
export default {
  data() {
    return {
      typeDisplay: 'none',
      intypeDisplay: 'block',
      username: '',
      mobile: '',
      reason: '机构赠送',
      integral: '',
      overIntegral: 0,
      payType_options: [
        {
          value: '1',
          label: ' '
        },
        {
          value: '2',
          label: '微信'
        },
        {
          value: '4',
          label: '爱币'
        }
      ],
      payType: '1',
      sex_options: [
        {
          value: '0',
          label: '未知'
        },
        {
          value: '1',
          label: '男'
        },
        {
          value: '2',
          label: '女'
        }
      ],
      radio_options: [
        {
          label: ' ',
          value: '1'
        },
        {
          label: '微信',
          value: '2'
        },
        {
          label: '爱币',
          value: '4'
        }
      ],
      sex: '1',
      adminId: '',
      mechanismId: '',
      disabled: false
    }
  },
  mounted() {
    this.getUDatas()
  },
  methods: {
    getUDatas() {
      var test = document.querySelectorAll(".mint-radio-label");
      test[0].className="zhifubao";
      test[0].innerHTML="<image src='https://fistjiemyself.oss-cn-beijing.aliyuncs.com/image/zfb.png' class='zfb_img'>"
      test[1].className="weChat";
      test[1].innerHTML="<image src='https://fistjiemyself.oss-cn-beijing.aliyuncs.com/image/wechat.png' class='zfb_img'>"
      test[2].className="aibi";
      test[2].innerHTML="<image src='https://fistjiemyself.oss-cn-beijing.aliyuncs.com/image/abpay.png' class='zfb_img'>"
      let _this = this
      _this.$store.dispatch('hideLoading')
      if (window.sessionStorage.userInfo) {
        let uObj = JSON.parse(window.sessionStorage.userInfo)
        console.log(uObj)
        this.adminId = uObj.id
        this.mechanismId = uObj.mechanismId
        this.overIntegral = uObj.balance * 5
      } else {
        _this.$router.push({
          path: '/login'
        })
      }
    },
    goPay() {
      let _this = this
      if (!/^[1][0-9]{10}$/.test(_this.mobile) || _this.mobile == '') {
        MessageBox.alert('请输入合法手机号', '提示')
      } else if (_this.integral == '') {
        MessageBox.alert('请输入充值的积分数量', '提示')
      } else if (_this.reason == '') {
        MessageBox.alert('请输入充值的原因', '提示')
      } else if (!/^[1-9][0-9]*$/.test(_this.integral)) {
        MessageBox.alert('积分数量为大于零整数', '提示')
      } else {
        _this.disabled = true
        _this.$http
          .get('/mechanismadmin/mobile/queryUser', {
            params: {
              mobile: _this.mobile
            }
          })
          .then(
            res => {
              console.log(res)
              if (res.status == 200) {
                _this.userInfo = res.data.data.user
                console.log(_this.userInfo)
                if (_this.userInfo == undefined) {
                  _this.disabled = false
                  MessageBox.confirm('用户不存在，请创建用户！')
                    .then(action => {
                      _this.typeDisplay = 'block'
                      _this.intypeDisplay = 'none'
                      _this.disabled = false
                    })
                    .catch(() => {
                      _this.disabled = false
                    }) //一定别忘了这个
                } else {
                  //用户存在，根据paytype充值
                  if (_this.payType == '1') {
                    //  this.$router.push({path: '/pay'});
                    _this.$http.get('/mechanismadmin/mobilePay/queryConfig', {}).then(res => {
                      let ratio = res.data.data.queryConfig
                      let money = this.integral * ratio
                      window.location.href =
                        './src/components/alipay/pay.html?mobile=' +
                        this.mobile +
                        '&integral=' +
                        this.integral +
                        '&reason=' +
                        this.reason +
                        '&money=' +
                        money +
                        '&payType=1&type=1' +
                        '&adminId=' +
                        this.adminId +
                        '&mechanismId=' +
                        this.mechanismId +
                        '&moneyconfig=' +
                        ratio
                    })
                  }
                  if (_this.payType == '2') {
                    _this.$http.get('/mechanismadmin/mobilePay/queryConfig', {}).then(res => {
                      window.sessionStorage.jumptype = '2'
                      let ratio = res.data.data.queryConfig
                      let money = this.integral * ratio
                      //微信付款
                      this.$router.push({
                        path: '/wxpay',
                        query: {
                          mobile: this.mobile,
                          integral: this.integral,
                          reason: this.reason,
                          payType: '2',
                          type: '1',
                          money: money,
                          adminId: this.adminId,
                          mechanismId: this.mechanismId,
                          ratio: ratio
                        }
                      })
                    })
                  }
                  if (_this.payType == '4') {
                    if (_this.overIntegral < parseInt(_this.integral)) {
                      MessageBox.alert('爱币不足，不能兑换积分', '提示')
                      this.disabled = false
                    } else {
                      _this.$http
                        .get('/mechanismadmin/mobilePay/aiBiRecharge', {
                          params: {
                            mobile: this.mobile,
                            integral: this.integral,
                            reason: this.reason,
                            payType: '4',
                            type: '1',
                            adminId: this.adminId,
                            mechanismId: this.mechanismId
                          }
                        })
                        .then(res => {
                          if (res.data.errno === -1) {
                            alert(res.data.errmsg)
                          }
                          if (res.data.errno === -2) {
                            alert(res.data.errmsg)
                          }
                          if (res.data.errno === -3) {
                            alert(res.data.errmsg)
                          }
                          if (res.data.errno === 0) {
                            alert('充值成功')
                            _this.integral = ''
                            _this.disabled = false
                          }
                        })
                    }
                  }
                }
              } else {
                alert('请求出现错误')
              }
              console.log(res)
            },
            err => {
              console.log(err)
            }
          )
      }
    },
    addUser() {
      let _this = this
      if (!/^[1][0-9]{10}$/.test(_this.mobile) || _this.mobile == '') {
        // alert('请输入合法手机号')
        MessageBox.alert('请输入合法手机号', '提示')
      } else {
        //  if(/^[1][0-9]{10}$/.test(_this.mobile)){
        //   alert('请输入合法手机号')
        // } else
        _this.$http
          .get('/mechanismadmin/mobile/addUser', {
            params: {
              mobile: _this.mobile,
              sex: _this.sex,
              username: _this.username,
              mechanismid: _this.mechanismId
            }
          })
          .then(
            res => {
              console.log(res)
              if (res.data.data != 'fail') {
                if (res.status == 200) {
                  // alert('创建成功！')
                  MessageBox.alert('创建成功！', '提示')
                  _this.typeDisplay = 'none'
                  _this.intypeDisplay = 'block'
                } else {
                  // alert('请求出现错误')
                }
              } else {
                MessageBox.alert('创建失败，此用户已经绑定，请根据手机号充值！', '提示')
                _this.typeDisplay = 'none'
                _this.intypeDisplay = 'block'
                // _this.$router.push({
                //   path: '/login'
                // })
              }

              console.log(res)
            },
            err => {
              console.log(err)
            }
          )
      }
    }
  }
}
</script>

<style>
@import '../assets/css/login.css';
</style>